<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0; padding: 0;
			}
			form {
				width: 350px;
				background-color: #9CBC2B;
				margin: 20px auto;
				padding: 0 15px;
				color: #364411;
				border-radius: 5px;
			}
			.step {
				font-size: 14px;
				font-weight: bold;
				margin: 10px 0;
			}
			.form-line {
				border-radius: 5px;
				border-color: #F0F5DF;
				border-width: 2px;
				border-style: solid;
				padding: 3px;
				margin: 3px 0;
				background-color: #CEDE95;
				font-size: 12px;
				padding-left: 10px;
			}
			.form-line span {
				display: inline-block;
				width: 110px;
			}
			.form-line input {
				background: white;
				border: none;
				height: 20px;
				border-radius: 3px;
				width: 180px;
			}
			.form-line input[type=radio] {
				width: 25px;
				height: 12px;
			}
			.form-line textarea {
				width: 180px;
				height: 70px;
				vertical-align: top;
				border: none;
				border-radius: 3px;
				resize: none;
			}
			input.submit-bnt {
				border: none;
				border-radius: 20px;
				background-color: #374313;
				color: white;
				display: block;
				width: 100px;
				padding: 5px 0;
				margin: 10px auto;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<form action="">
			<section>
				<p class="step">第一步，详细信息</p>
				<p class="form-line">
					<span>姓名</span>
					<input type="text" placeholder="请输入姓名"/>
				</p>
				<p class="form-line">
					<span>电话</span>
					<input type="text" placeholder="13955556666"/>
				</p>
				<p class="form-line">
					<span>Facebook主页</span>
					<input type="url">
				</p>
			</section>
			<section>
				<p class="step">第二步，收货地址</p>
				<p class="form-line">
					<span>详细地址</span>
					<textarea placeholder="安卓Q区171大区绽风华"></textarea>
				</p>
				<p class="form-line">
					<span>邮箱</span>
					<input type="text">
				</p>
			</section>
			<section>
				<p class="step">第三步，银行卡信息</p>
				<p class="form-line">
					<span>银行卡类型</span>
					<input type="radio" name="cardType" />借记卡
					<input type="radio" name="cardType" />信用卡
					<input type="radio" name="cardType" />VISA卡
				</p>
				<p class="form-line">
					<span>卡号</span>
					<input type="number">
				</p>
				<p class="form-line">
					<span>密码</span>
					<input type="number" placeholder="这个不用填">
				</p>
				<p class="form-line">
					<span>持卡人</span>
					<input type="text">
				</p>
			</section>
			<p>
				<input type="submit" class="submit-bnt" value="提交" />
			</p>
		</form>
	</body>
</html>
